<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <!-- 绑定其他表单元素 -->
        <!-- textarea
            注意: textarea标签的内容是无效的
        -->
        <!-- <p>{{msg}}</p>
        <textarea v-model="msg">
            文字{{num}}
        </textarea> -->
        <!-- 单个多选框
            注意:checked是bool类型值
        -->
        <!-- <input type="checkbox" v-model="checked"> {{checked}} -->

        <!-- 多个复选框
        注意:v-model绑定是同一个数组checkedNames
        -->
        <!-- <div id='example-3'>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> jack
            <input type="checkbox" id="john" value="John" v-model="checkedNames"> john
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> Mike <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div> -->

        <!-- 单选框
        注意:v-model绑定同一个数据picked
        -->
        <div id="example-4">
            <input type="radio" id="one" value="One" v-model="picked"> One <br>
            <input type="radio" id="two" value="Two" v-model="picked"> Two <br>
            <span>Picked: {{ picked }}</span>
        </div>
    </div>
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                picked: '',
                checkedNames: [],
                checked: true,
                num: 1,
                msg: 'abc'
            },
            methods: {

            }
        });
    </script>
</body>

</html>